<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>multi-drag</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            float: left;
            margin: 1em;
            list-style-type: none;
        }

        li {
            width: 5em;
            border: 1px solid #AAA;
            text-align: center;
            background-color: #EEE;
            cursor: move;
        }
    </style>
    <!--[if lte IE 8]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
    <ul>
        <li>#1</li>
        <li>#2</li>
        <li>#3</li>
        <li>#4</li>
        <li>#5</li>
        <li>#6</li>
        <li>#7</li>
        <li>#8</li>
        <li>#9</li>
    </ul>
    <ul>
        <li>(a)</li>
        <li>(b)</li>
        <li>(c)</li>
        <li>(d)</li>
        <li>(e)</li>
        <li>(f)</li>
        <li>(g)</li>
        <li>(h)</li>
        <li>(i)</li>
    </ul>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script>
(function($) {

$("ul").sortable({
    revert: true,
    connectWith: "ul",
    receive: function(ev, ui) {
        
        alert(ui);
    },
    remove: function(ev, ui) {
        // ...
    }
});

})(jQuery);
    </script>
</body>

</html>

